<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="rules">
						<wd-input no-border @click="goBankCard" prop="bank_id" v-model="bankCard.card_no"
							custom-class="wd-input-custom-class-fd-col  bg-transparent square no-border" type="text"
							readonly placeholder="请选择银行卡" use-suffix-slot>
							<template #suffix>
								<view><wd-icon name="arrow-right" size="12px" color="#333333"></wd-icon></view>
							</template>
						</wd-input>
						<view class="card">
							<view class="text">充值金额</view>
							<view>
								<wd-input no-border prop="money" custom-class="no-border" v-model="formData.money"
									use-prefix-slot placeholder=" " type="digit ">
									<template #prefix>
										<view class="text1">￥</view>
									</template>
								</wd-input>
							</view>
						</view>
					</wd-form>
				</view>
				<view class="footer" id="footer">
					<view class="btns">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success  wd-button-custom-class-w100">确认充值</wd-button>
					</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import { recharge } from "@/api/index"

	import useRouter from '@/hooks/useRouter.ts';
	export default defineComponent({
		name: '',
		components: {
		},
		setup(props, ctx) {
			const router = useRouter();
			const theme = ref('');
			const bankCard = ref({}); // 用于存储选择的银行卡信息
			const formRef = ref(null);
			const formData = ref({
				money: "",
				bank_id: ""
			})
			const rules = ref({
				bank_id: [{ required: true, message: '请选择银行卡号' }],
				money: [{
					required: true,
					message: '请输入金额',
					validator: (value : any) => {
						if (Number(value) <= 0) {
							return Promise.reject('充值金额必须大于0')
						}
						return Promise.resolve()
					}

				}]
			}) // 表单验证规则，根据需要进行定义和赋值。
			const submit = () => {
				formRef.value.validate().then(({ valid, errors }) => {
					// 提交充值请求的逻辑代码
					if (valid) {
						recharge({
							...formData.value
						}).then((res : any) => {
							uni.$wdToast.show("充值成功");
							setTimeout(() => {
								router.back({
									delta: 1
								});
							}, 1000)
							// 处理充值结果，比如弹出提示框，跳转到其他页面等。
						})
					}
				})
			}
			const goBankCard = () => {
				router.push({
					url: "/purse/bank-card/bank-card",
					events: {
						getBank: (res : any) => {
							bankCard.value = res;
							formData.value.bank_id = res.id; // 假设银行卡信息中有一个id字段来标识银行卡。
							router.back({
								delta: 1,
							});
						}
					},
				})
			}
			return {
				theme,
				bankCard,
				formData,
				goBankCard,
				formRef,
				rules,
				submit
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		.no-border::after {
			display: none !important;
		}

		.form {}

		.wd-input-custom-class-fd-col {
			display: flex;
		}

		.card {
			margin: 0 18rpx;
			width: auto;
			padding: 24rpx; // 调整内边距，使内容与边框保持距离

			.text {
				margin-bottom: 10rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 25rpx;
				color: #999999;
			}

			.text1 {
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 22rpx;
				color: #333333;
			}

			.text2 {
				margin-top: 20rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 20rpx;
				color: #cccccc;
			}
		}

		.footer {
			position: fixed;
			padding: 24rpx;
			bottom: 100rpx;
			left: 0rpx;
			width: calc(100% - 24rpx - 24rpx);
			min-height: 100rpx;
			border-radius: 21rpx 21rpx 0 0;
		}
	}
</style>